<template>
    <div class="p-2">
        <el-card shadow="never">
            <template #header>
                <el-row justify="space-between">
                    <el-col :span="1.5">
                        <el-form :model="queryParams" ref="queryFormRef" :inline="true">
                            <el-form-item label="创建日期：" prop="createTime">
                                <el-date-picker v-model="queryParams.createTime" type="date" placeholder="请选择创建日期"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                            </el-form-item>
                            <el-form-item label="所属公司：" prop="companyId">
                                <el-select v-model="queryParams.companyId" clearable>
                                    <el-option v-for="item in subsidiariesList" :key="item.id" :label="item.companyName"
                                        :value="item.id" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="收款卡名称：" prop="name">
                                <el-input v-model="queryParams.name" placeholder="请输入收款卡名称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="1.5"><el-button @click="handlOpenAdd" plain type="success"
                            icon="CirclePlus">新增</el-button></el-col>
                </el-row>
            </template>

            <template v-if="dataList.length != 0">
                <div class="grid-container">
                    <div @click="handlOpenDetails(item)" class="grid-content"
                        :class="`bg-color-${item.receivePaymentType}`" v-for="(item, index) in dataList" :key="index">
                        <el-tooltip content="删除">
                            <el-button @click.stop="handleDelete(item, getList)" class="delete" link
                                icon="CircleClose"></el-button>
                        </el-tooltip>
                        <div>
                            <div class="grid-content-text mb20">
                                {{ item.name }}
                            </div>
                            <div class="grid-content-text mt20 mb10">
                                余额：￥{{ item.balance }}
                            </div>
                            <div class="grid-content-text">
                                所属公司：{{ subsidiariesList.filter((dick: any) => dick.id ===
                                    item.companyId)[0].companyName
                                }}
                            </div>

                            <div class="mt10">
                                <el-tooltip content="内部转账">
                                    <el-button @click.stop="handlOpenBookTransfer(item)" link>
                                        <i class="iconfont icon-zijinzhuanzhang icon-style" />
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip content="转账汇款">
                                    <el-button @click.stop="handlOpenTransferAndRemittance(item)" link>
                                        <i class="iconfont icon-neibuzhuanzhang icon-style" />
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip content="外部收款">
                                    <el-button @click.stop="handlOpenCollectionOfPayments(item)" link>
                                        <i class="iconfont icon-yingshoukuan icon-style" />
                                    </el-button>
                                </el-tooltip>
                            </div>
                        </div>

                        <div>
                            <!-- 微信 -->
                            <i v-if="item.receivePaymentType === '1'" style="color: #FFFFFF; font-size: 64px;"
                                class="iconfont icon-weixin" />
                            <!-- 支付宝 -->
                            <i v-else-if="item.receivePaymentType === '2'" style="color: #FFFFFF; font-size: 64px;"
                                class="iconfont icon-zhifubao" />
                            <!-- 农业银行 -->
                            <i v-else-if="item.receivePaymentType === '3'" style="color: #FFFFFF; font-size: 64px;"
                                class="iconfont icon-nongyeyinxing" />
                            <!-- 民生银行 -->
                            <i v-else-if="item.receivePaymentType === '4'" style="color: #FFFFFF; font-size: 64px;"
                                class="iconfont icon-minshengyinhang" />
                            <!-- 青岛银行 -->
                            <i v-else-if="item.receivePaymentType === '5'" style="color: #FFFFFF; font-size: 64px;"
                                class="iconfont icon-yinhang-qingdaoyinhang-" />
                            <!-- 工商银行 -->
                            <i v-else-if="item.receivePaymentType === '6'" style="color: #FFFFFF; font-size: 64px;"
                                class="iconfont icon-gongshangyinhang" />
                            <!-- 建设银行 -->
                            <i v-else-if="item.receivePaymentType === '7'" style="color: #FFFFFF; font-size: 64px;"
                                class="iconfont icon-jiansheyinhang" />
                        </div>
                    </div>
                </div>

                <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getList" />
            </template>

            <el-empty v-else description="暂无选项卡" />
        </el-card>
        <!-- 新增收款卡 -->
        <AddPaymentCard :visible="addVisible" :initList="subsidiariesList" @close="handlOpenAddClose"
            @submit="getList" />
        <!-- 查看详情 -->
        <PaymenDtetails :visible="detailsVisible" :initList="datailsList" :subsidiariesList="subsidiariesList"
            @close="detailsVisible = false" />
        <!-- 内部转账 -->
        <BookTransfer :visible="bookTransferVisible" :initList="dataRow" :subsidiariesList="subsidiariesList"
            :allList="allList" @close="handleCloseBookTransfer" @submit="getList" />
        <!-- 转账汇款 -->
        <TransferAndRemittance :visible="transferAndRemittanceVisible" :initList="dataRow"
            :type="collectionOfPaymentsType" @close="handleCloseTransferAndRemittance" @submit="getList" />
    </div>
</template>
<script setup lang="ts">
import { type FormInstance } from 'element-plus';

import { getPaymentCardListApi, getAllPaymentCardApi } from '@/api/sj/financialManagement/paymentCard/index'
import { getAllSubsidiaryApi } from '@/api/sj/warehouse/auxiliary';


// 新增收款卡
import AddPaymentCard from './components/add.vue';
import useAddPaymentCard from '@/hooks/financialManagement/paymentCard/useAddPaymentCard';

// 查看详情
import PaymenDtetails from './components/details.vue'
import usePaymenDtetails from '@/hooks/financialManagement/paymentCard/usePaymenDtetails';

// 内部转账 
import BookTransfer from './components/bookTransfer.vue'
import useBookTransfer from '@/hooks/financialManagement/paymentCard/useBookTransfer';

// 转账汇款
import TransferAndRemittance from './components/transferAndRemittance.vue';
const { detailsVisible, datailsList, handlOpenDetails } = usePaymenDtetails();

const { addVisible, handlOpenAdd, handlOpenAddClose, handleDelete } = useAddPaymentCard();
const { bookTransferVisible, transferAndRemittanceVisible, collectionOfPaymentsType, dataRow, handlOpenBookTransfer, handleCloseBookTransfer, handlOpenTransferAndRemittance, handleCloseTransferAndRemittance, handlOpenCollectionOfPayments } = useBookTransfer();


const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const queryFormRef = ref<FormInstance>();

const data = reactive<pageDataOnlyQuery<any>>({
    queryParams: {
        name: '',
        createTime: '',
        companyId: '',
        pageSize: 12,
        pageNum: 1
    }
});

const { queryParams } = toRefs(data);

const loading = ref(false);
const dataList = ref<any>([]);
const totalData = ref(0);
const gridIndex = ref(0);
const subsidiariesList = ref<any>([]);
const allList = ref<any>([]);

const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

const getList = async () => {
    loading.value = true;
    try {
        const { code, rows, total } = await getPaymentCardListApi(queryParams.value);
        if (code === 200) {
            dataList.value = rows;
            totalData.value = total;
        }
        loading.value = false;
    } catch (error) {
        loading.value = false;
    }
};

/** 获取所有子公司 */
const getCompanyList = async () => {
    const { data } = await getAllSubsidiaryApi();
    subsidiariesList.value = data;
};

/** 获取所有收款卡 */
const getAllPaymentCard = async () => {
    const { data } = await getAllPaymentCardApi();
    allList.value = data;
};

onMounted(() => {
    getCompanyList();
    getList();
    getAllPaymentCard();
});

</script>
<style lang="scss" scoped>
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;

    .grid-content {
        width: 100%;
        height: 200px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px;
        position: relative;
        cursor: pointer;

        &:hover {
            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
        }

        .delete {
            position: absolute;
            top: 0px;
            right: 0px;
            font-size: 25px;
            color: #FFFFFF;
        }

        .icon-style {
            font-size: 25px;
            color: #FFF;
        }



        .grid-content-text {
            color: #FFF;
            font-weight: 700;
        }
    }

    .bg-color-1 {
        background-color: #35C458;
    }

    .bg-color-2 {
        background-color: #69AFF0;
    }

    .bg-color-3 {
        background-color: #54998B;
    }

    .bg-color-4 {
        background-color: #2C67C5;
    }

    .bg-color-5 {
        background-color: #B5423B;
    }

    .bg-color-6 {
        background-color: #EDC14D;
    }

    .bg-color-7 {
        background-color: #AD8B00;
    }

    @media (max-width: 1250px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 576px) {
        grid-template-columns: repeat(1, 1fr);
    }
}
</style>